<template>
  <view class="container">
      <u-sticky offset-top="0">
          <!--          <video v-if="addForm.fileVo" ref="videoPlayer" :src="addForm.fileVo.downloadUrl" :controls="true" :enable-progress-gesture="true" :show-progress-bar="true"></video>-->
          <PlayerModule ref="playerModuleRef" v-if="addForm.defaultVideoUrl"></PlayerModule>
          <image class="video_default" v-else src="../../static/images/empty_video.svg"></image>
        
          <u-tabs :list="list" :current="tabIndex" activeStyle="{color:'#016EFF'}" @click="tabsClick"></u-tabs>
      </u-sticky>
      <view v-if="showCollects" class="show_collect_like">
          <image class="like" @click="likeFn(info)"
                 :src="info.like === 1 ? '../../static/images/home/heart_fill.png' : '../../static/images/home/heart.png'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.likeNumber" class="likeNumber">{{ info.likeNumber }}</text>
          <image class="collection" @click="collectionFn(info)"
                 :src="info.collect === 1 ? '../../static/images/start1.svg' : '../../static/images/start.svg'"
                 style="width: 36rpx; height: 32rpx"></image>
          <text v-if="info.collectNumber" class="collectNumber">{{ info.collectNumber }}</text>
      </view>
      <view v-if="tabIndex == 0">
          <view class="info">
              <h3>{{ addForm.folderName }}</h3>
              <view class="author">
                  <text>作者姓名：</text>
                  <text>{{ addForm.author }}</text>
              </view>
              <view class="blurb">
                  <text>课程简介：</text>
                  <text>{{ addForm.introduction }}</text>
        </view>
      </view>

      <view class="tree_model">
        <Tree  ref="tree" :range="tableData" :rangeKey="rangeKey" :idKey="idKey" @handlePlayer="handlePlayer" />
    </view>
    </view>
    <view v-else class="preview" :class="addForm.defaultCourseUrl?'':'preview_no_file'">
        <PreviewModule ref="PreviewModuleRef" v-if="addForm.defaultCourseUrl"></PreviewModule>
        <image v-else src="../../static/images/no_file.svg"></image>
    </view>
  </view>
</template>

<script>
import Tree from "@/components/tree/courseTree.vue";
import PlayerModule from '../player_module'
import PreviewModule from '../preview_module'
import config from '@/config'
export default {
  components: {
    Tree, PlayerModule, PreviewModule
  },
  data() {
    return {
      author: "",
      name: "",
      list: [
        {
          name: "简介",
        },
          {
              name: '查看课件'
          }
      ],
        rangeKey: 'chapterName',
    
        // 指定 Object 中 key 的值作为单条数据的唯一id
        // 跟上面的类似,一个道理，只不过这个是标识的唯一id键名
        idKey: 'id',
        info: {
            like: 0,
            likeNumber: 0,
            collect: 0,
            collectNumber: 0
        },
        id: '',
        addForm: {
            folderName: '',
            author: '',
            introduction: '',
            defaultVideoUrl: '',
            defaultCourseUrl: ''
        },
        tableData: [],
        tabIndex: 0,
        showCollects: true,
        id: ''
    };
  },
    onload(options) {
        this.showCollects = !options.showCollects
        this.id = options.id;
    },
    methods: {
        collectionFn(item) {
            console.log(item, "ffff")
            // item.collect = Math.abs(item.collect - 1)
            let url = item.collect === 1 ? '/knowledgeCollect/delete' : '/knowledgeCollect/add'
            this.$request({
                url: url,
                method: 'post',
                data: {
                    collectType: '2',
                    knowledgeFileId: this.id
                }
            }).then(({data}) => {
                if (item.collect === 1) {
                    this.$modal.loading('已取消收藏')
                    this.info.collect = 0
                    this.info.collectNumber--
                } else {
                    this.$modal.loading('已收藏')
                    this.info.collect = 1
                    this.info.collectNumber++
                }
                
                setTimeout(() => {
                    this.$modal.closeLoading()
                }, 1000)
            })
        },
        likeFn(item) {
            let url = item.like === 1 ? '/knowledgeCollect/delete    ' : '/knowledgeCollect/add'
            this.$request({
                url: url,
                method: 'post',
                data: {
                    collectType: '1',
                    knowledgeFileId: this.id
                }
            }).then(({data}) => {
                if (item.like === 1) {
                    this.$toast('取消点赞')
                    this.info.like = 0
                    this.info.likeNumber--
                } else {
                    this.$toast('已点赞')
                    this.info.like = 1
                    this.info.likeNumber++
                }
            })
        },
        getVideoDetail() {
            this.$request({
                url: '/knowledgeTrain/detail',
                method: 'get',
                params: {
                    id: this.id
                }
            }).then((data) => {
                if (data.code == 200) {
                    this.addForm = data.data.course
                    this.info.like = data.data.course.like
                    this.info.likeNumber = data.data.course.likeNumber
                    this.info.collect = data.data.course.collect
                    this.info.collectNumber = data.data.course.collectNumber
                    this.tableData = data.data.video && [data.data.video]
                    this.$nextTick(() => {
                      if (this.addForm.defaultVideoUrl) {
                        this.$refs.playerModuleRef.defaultAutoplay(config.baseUrl + this.addForm.defaultVideoUrl)
                      }
                    })
                }
      });
    },
    //视频播放
    handlePlayer(row) {
      console.log(8989,row)
      if (["mp4", "mov","avi", "wmv"].includes(row.fileFormat)) {
          this.$nextTick(() => {
              console.log(999, this.$refs, row)
              this.$refs.playerModuleRef.init({info: row})
          })
        // this.$tab.navigateTo(`/pages/player?info=${encodeURIComponent(JSON.stringify(row))}`);
      } else {
          this.tabIndex = 1
          this.$nextTick(() => {
              console.log(999, this.$refs)
              this.$refs.PreviewModuleRef.init({info: row})
          })
        // this.$tab.navigateTo(`/pages/preview?info=${encodeURIComponent(JSON.stringify(row))}`);
      }
    },
    tabsClick(e) {
      this.tabIndex = e.index;
      if(this.tabIndex === 1) {
          this.$nextTick(()=> {
            if (this.addForm.defaultCourseUrl) {
              this.$refs.PreviewModuleRef.init({defaultFlag: true, defaultCourseUrl: this.addForm.defaultCourseUrl})
            }
          })
      }
    },
  },
  onLoad(options) {
    this.id = options.id;
  },
  mounted() {
    this.getVideoDetail();
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 0 30rpx;
    ::v-deep{
        .u-sticky{
            background: #FFFFFF!important;
            border-top: 30rpx solid #f5f7fb;
        }
        .u-tabs__wrapper__nav{
            margin: 0;
            border-radius: 0;
            padding: 20rpx 0;
            background: #f5f7fb;
            .u-tabs__wrapper__nav__line{
                bottom: 20rpx;
            }
            .u-tabs__wrapper__nav__item{
                background: #FFFFFF;
                &:first-child{
                    border-radius: 16rpx 0 0 16rpx;
                }
                &:nth-child(2){
                    border-radius: 0 16rpx 16rpx 0;
                }
            }
            .u-tabs__wrapper__nav__item__text{
                font-family: Source Han Sans;
                font-size: 30rpx;
                font-weight: 500;
                color: #4C5A67;
            }
            .u-tabs__wrapper__nav__item-0 .u-tabs__wrapper__nav__item__text{
                color: #016EFF;
            }
            .u-tabs__wrapper__nav__item-1 .u-tabs__wrapper__nav__item__text{
                color: #016EFF;
            }
        }
    }
    
  .info {
    padding: 28rpx;
    line-height: 68rpx;
    border-radius: 16rpx;
    background: #fff;
    .author,
    .blurb {
      font-size: 28rpx;
      font-family: Source Han Sans;
      font-weight: 500;
      color: #1C2126;
        width: 100%;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
      & text:nth-child(1){
        color: #4C5A67;
      }
    }
  }
  h3 {
    flex: 1;
    padding: 0;
    margin: 0;
    font-size: 32rpx;
    line-height: 34px;
    font-family: Source Han Sans;
    font-weight: 500;
    color: #1C2126;
      width: 100%;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .title {
    display: flex;
    align-items: center;
    padding: 20rpx 20rpx 0;
    font-weight: 550;
    margin-top: 20rpx;
    background: #fff;
  }
}

.video_default {
  width: 100%;
  height: 382rpx;
}
.tree_model{
    //height: 40vh;
    width: 100%;
    background: white;
    margin-top: 20rpx;
    border-radius: 16rpx;
}

.preview{
    width: 100%;
    min-height: 60vh;
    border-radius: 16rpx;
    background: white;
    &.preview_no_file{
        background: transparent;
        min-height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

::v-deep uni-video {
  height: 386rpx !important;
}
::v-deep .u-tabs__wrapper__nav {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}
::v-deep .u-tabs__wrapper__nav__item {
  width: 50% !important;
  font-size: 30rpx;
}
</style>
